<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>聊天窗口</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <!--360浏览器优先以webkit内核解析-->
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../../../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../../../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- Morris -->
    <link href="../../../static/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <!-- Gritter -->
    <link href="../../../static/js/plugins/gritter/jquery.gritter.css"
          th:href="@{/js/plugins/gritter/jquery.gritter.css}" rel="stylesheet">
    <!--js-->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var socket;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onmessage = function (event) {
                var str = String(event.data).split("#");
                var style;
                if (str[1].equals($.trim($('#name1').val()))) {
                    style = "right";
                } else {
                    style = "left";
                }
                var html =
                    '<div class="chat-message">' +
                    '<div class="message">' +
                    '<a class="message-author"> ' + str[1] + '</a>' +
                    '<span class="message-date"> ' + str[0] + '</span>' +
                    '<span class="message-content">' + str[2] + '</span>' +
                    '</div>' +
                    '</div>';
                $("#chat").append(html);
            };
            socket.onopen = function (event) {

            };
            socket.onclose = function (event) {
                alert('连接已断开');
            };
        } else {
            alert("你的浏览器不支持 WebSocket！\n");
        }
        function getdate() {
            var now = new Date(),
                y = now.getFullYear(),
                m = now.getMonth() + 1,
                d = now.getDate();
            return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        }
        function send() {
            var str = getdate() + "#";
            if ($.trim($('#name1').val()) != null || $.trim($('#name1').val()) != '')
                str += $.trim($('#name1').val()) + "#" + $.trim($("#text1").val());
            else
                str += "test#" + $.trim($("#text1").val());
            socket.send(str);
            init();
        }
        function users() {
            $.ajax({
                type: "POST",
                url: "/system/user/list",
                dataType: "json",
                success: function (data) {
                    var names = data.rows;
                    var str = '';
                    for (var i in names) {
                        var n = '';
                        if (names[i].status == 0)
                            n = '<span class="pull-right label label-primary">状态: 正常</span>';
                        else
                            n = '<span class="pull-right label label-error" >状态: 停用</span>';
                        str +=
                            '<div class="chat-user"> ' + n +
                            '<div class="chat-user-name"> ' +
                            '<a href="#">' + names[i].userName + '</a> ' +
                            '</div>' +
                            '</div>';
                    }
                    $("#users").html(str);

                }
            });
        }
        function init() {
            $("#chat").html("");
            $.ajax({
                type: "GET",
                url: "/broad/chat/msg",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var d = data[i];
                        var str = String(d).split("#");
                        if (str[1] == $.trim($('#name1').val())) {
                            style = "right";
                        } else {
                            style = "left";
                        }
                        var html =
                            '<div class="chat-message">' +
                            '<div class="message">' +
                            '<a class="message-author" href="#"> ' + str[1] + '</a>' +
                            '<span class="message-date"> ' + str[0] + '</span>' +
                            '<span class="message-content">' + str[2] + '</span>' +
                            '</div>' +
                            '</div>';
                        $("#chat").append(html);
                    }
                }
            })
        }
    </script>
</head>
<body onload="users();init();">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox chat-view">
                <div class="ibox-title">聊天窗口</div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-md-9">
                            <div id="chat" class="chat-discussion" style="height: 500px;"></div>
                        </div>
                        <div class="col-md-3">
                            <div class="chat-users" style="height: 500px">
                                <div class="users-list" id="users"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="chat-message-form">
                <div class="form-group">
                    <input type="hidden" id="name1" th:value="${session.userName}">
                    <textarea class="form-control message-input" id="text1" name="message"
                              placeholder="输入消息内容"></textarea>
                </div>
            </div>
            <button class="btn btn-primary btn-sm" onclick="send()">发送</button>
        </div>
    </div>
</div>
</body>
</html>